
<div class="container">

<div class="clearfix tab-header">

    <!-- tabs nav -->
    <ul class="nav nav-tabs pull-left">
        <li class=""><!-- TAB 1 -->
            <a aria-expanded="false" href="#tab-1" data-toggle="tab"><i class="fa fa-eye text-muted"></i> Overview</a>
        </li>
        <li class="active"><!-- TAB 2 -->
            <a aria-expanded="true" href="#tab-2" data-toggle="tab"><i class="fa fa-cogs text-muted"></i> Account</a>
        </li>
    </ul>
    <!-- /tabs nav -->

</div>

<div class="clearfix tab-body profile-tabs">

<!-- tabs content -->
<div class="tab-content transparent">

<!-- TAB 1 CONTENT -->
<div id="tab-1" class="tab-pane">

<div class="row">

<!-- LEFT -->
<div class="col-lg-4 col-md-5">

    <!-- IMAGE -->
    <figure class="default-gradient bg-silver text-center margin-bottom8">
											<span class="buttons-over-image">
												<a href="#" class="btn btn-success btn-xs"><i class="fa fa-edit"></i> Edit</a>
												<a href="#" class="btn btn-danger btn-xs"><i class="fa fa-times"></i> Delete</a>
											</span>

        <!-- 230 x 340 px -->
        <img class="img-responsive" src="assets/images/demo/people/9_thumb.jpg" alt="" />
    </figure>
    <!-- /IMAGE -->

    <!-- BUTTONS -->
    <div class="margin-bottom8 profile-buttons">
        <div class="row text-center">

            <!-- Followers -->
            <div class="col-md-6 col-sm-6 col-xs-6">
                <h2>20,7K</h2>
                <span class="block text-muted fsize12">Followers</span>

                <a href="#" class="btn btn-success btn-sm margin-top20">
                    <span class="fa fa-plus-circle"></span> Follow
                </a>
            </div>

            <!-- Following -->
            <div class="col-md-6 col-sm-6 col-xs-6">
                <h2>1,3K</h2>
                <span class="block text-muted fsize12">Following</span>

                <a href="#" class="btn btn-info btn-sm margin-top20">
                    <span class="fa fa-user"></span> Profile
                </a>
            </div>

        </div>
    </div>
    <!-- /BUTTONS -->

    <!-- MENU -->
    <ul class="side-nav list-group margin-bottom30">
        <li class="list-group-item active"><a href="#"><i class="fa fa-home"></i> Profile</a></li>
        <li class="list-group-item list-toggle">   <!-- NOTE: "active" to be open on page load -->
            <a data-toggle="collapse" data-parent="#sidebar-nav" href="#collapse-2"><i class="fa fa-level-down"></i> Collapse Menu</a>
            <ul id="collapse-2" class="collapse"><!-- NOTE: "collapse in" to be open on page load -->
                <li><a href="#"><i class="fa fa-angle-right"></i> Option #1</a></li>
                <li><a href="#"><i class="fa fa-angle-right"></i> Option #2</a></li>
                <li><a href="#"><i class="fa fa-angle-right"></i> Option #3</a></li>
            </ul>
        </li>

        <li class="list-group-item"><a href="#"><i class="fa fa-comments"></i> Comments</a></li>
        <li class="list-group-item"><a href="#"><i class="fa fa-edit"></i> History</a></li>
        <li class="list-group-item"><a href="#"><i class="fa fa-users"></i> Friends</a></li>
    </ul>
    <!-- /MENU -->

    <!-- USER ACTIVITY -->
    <h5 class="text-danger bold margin-top60 hidden-xs">
        <i class="fa fa-rss"></i>
        Activity
    </h5>

    <!-- activity list -->
    <div class="row profile-activity hidden-xs">

        <!-- activity item -->
        <div class="col-xs-2 col-sm-1">
            <time datetime="2014-06-29" class="datebox">
                <strong>Jun</strong>
                <span>29</span>
            </time>
        </div>

        <div class="col-xs-10 col-sm-11">
            <h6><a href="#">Lorem ipsum dolor sit amet</a></h6>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
                tincidunt laoreet dolore magna aliquam tincidunt erat volutpat laoreet dolore magna aliquam
                tincidunt erat volutpat.
            </p>
        </div>
        <!-- /activity item -->

        <div class="col-sm-12">
            <hr class="half-margins" />
        </div><!-- /activity separator -->

        <!-- activity item -->
        <div class="col-xs-2 col-sm-1">
            <time datetime="2014-06-29" class="datebox">
                <strong>Jun</strong>
                <span>29</span>
            </time>
        </div>

        <div class="col-xs-10 col-sm-11">
            <h6><a href="#">Sed diam nonummy nibh euismod</a></h6>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
                tincidunt laoreet dolore magna aliquam tincidunt erat volutpat laoreet dolore magna aliquam
                tincidunt erat volutpat.
            </p>
        </div>
        <!-- /activity item -->

        <div class="col-sm-12">
            <hr class="half-margins" />
        </div><!-- /activity separator -->

        <!-- activity item -->
        <div class="col-xs-2 col-sm-1">
            <time datetime="2014-06-29" class="datebox">
                <strong>Jun</strong>
                <span>29</span>
            </time>
        </div>

        <div class="col-xs-10 col-sm-11">
            <h6><a href="#">Sed diam nonummy nibh euismod</a></h6>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
                tincidunt laoreet dolore magna aliquam tincidunt erat volutpat laoreet dolore magna aliquam
                tincidunt erat volutpat.
            </p>
        </div>
        <!-- /activity item -->

        <div class="col-sm-12">
            <hr class="half-margins" />
        </div><!-- /activity separator -->

        <!-- paginatoin -->
        <div class="text-center">
            <ul class="pagination pagination-sm">
                <li class="disabled"><a href="#">Prev</a></li>
                <li class="active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">Next</a></li>
            </ul>
        </div>
        <!-- /paginatoin -->

    </div>
    <!-- /activity list -->

    <!-- /USER ACTIVITY -->

</div>

<!-- RIGHT -->
<div class="col-md-7">

<h3 class="nomargin">Melisa Doe</h3>
<span class="margin-bottom20 margin-top6 block gray fsize12">Creative Director</span>

<p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt laoreet dolore magna aliquam tincidunt erat volutpat laoreet dolore magna aliquam tincidunt erat volutpat.
</p>

<p>
    <a href="#" class="btn btn-default btn-xs"><i class="fa fa-envelope"></i> Send Message</a>
</p>


<ul class="has-icons list-unstyled">
    <li><i class="gray fa fa-map-marker"></i> United States</li>
    <li><i class="gray fa fa fa-pagelines"></i> 29 Years</li>
    <li><i class="gray fa fa-trophy"></i> Top Seller</li>
    <li><i class="gray fa fa-briefcase"></i> Photoshop, Corel</li>
    <li class="margin-top10">
        <a data-original-title="Facebook" href="#" data-toggle="tooltip" data-placement="top" title="" class="btn ico-only btn-facebook btn-xs"><i class="fa fa-facebook"></i></a>
        <a data-original-title="Twitter" href="#" data-toggle="tooltip" data-placement="top" title="" class="btn ico-only btn-twitter btn-xs"><i class="fa fa-twitter"></i></a>
        <a data-original-title="Google plus" href="#" data-toggle="tooltip" data-placement="top" title="" class="btn ico-only btn-google-plus btn-xs"><i class="fa fa-google-plus"></i></a>
        <a data-original-title="Linked In" href="#" data-toggle="tooltip" data-placement="top" title="" class="btn ico-only btn-linkedin btn-xs"><i class="fa fa-linkedin"></i></a>
        <a data-original-title="Pinterest" href="#" data-toggle="tooltip" data-placement="top" title="" class="btn ico-only btn-pinterest btn-xs"><i class="fa fa-pinterest"></i></a>
        <a data-original-title="Flickr" href="#" data-toggle="tooltip" data-placement="top" title="" class="btn ico-only btn-flickr btn-xs"><i class="fa fa-flickr"></i></a>
        <a data-original-title="Tumblr" href="#" data-toggle="tooltip" data-placement="top" title="" class="btn ico-only btn-tumblr btn-xs"><i class="fa fa-tumblr"></i></a>
        <a data-original-title="Skype" href="#" data-toggle="tooltip" data-placement="top" title="" class="btn ico-only btn-skype btn-xs"><i class="fa fa-skype"></i></a>
        <a data-original-title="Stack Overflow" href="#" data-toggle="tooltip" data-placement="top" title="" class="btn ico-only btn-stackoverflow btn-xs"><i class="fa fa-stack-overflow"></i></a>
        <a data-original-title="Instagram" href="#" data-toggle="tooltip" data-placement="top" title="" class="btn ico-only btn-instagram btn-xs"><i class="fa fa-instagram"></i></a>
        <a data-original-title="Dribble" href="#" data-toggle="tooltip" data-placement="top" title="" class="btn ico-only btn-dribbble btn-xs"><i class="fa fa-dribbble"></i></a>
        <a data-original-title="Youtube" href="#" data-toggle="tooltip" data-placement="top" title="" class="btn ico-only btn-youtube btn-xs"><i class="fa fa-youtube"></i></a>
        <a data-original-title="Vimeo" href="#" data-toggle="tooltip" data-placement="top" title="" class="btn ico-only btn-vimeo btn-xs"><i class="fa fa-vimeo-square"></i></a>
        <a data-original-title="Rss" href="#" data-toggle="tooltip" data-placement="top" title="" class="btn ico-only btn-rss btn-xs"><i class="fa fa-rss"></i></a>
    </li>
</ul>

<hr />

<form class="well">
    <textarea rows="2" class="form-control" placeholder="What's on your mind?"></textarea>

    <div class="margin-top-10">
        <button type="submit" class="btn btn-sm btn-primary pull-right">Post</button>
        <a href="#" class="btn btn-link profile-btn-link" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Add a Location"><i class="fa fa-map-marker"></i></a>
        <a href="#" class="btn btn-link profile-btn-link" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Add Photo"><i class="fa fa-camera"></i></a>
        <a href="#" class="btn btn-link profile-btn-link" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Add File"><i class="fa fa-file"></i></a>
    </div>
</form>


<!-- COMMENT -->
<ul class="comment list-unstyled">
    <li class="comment">

        <!-- avatar -->
        <img class="avatar" src="assets/images/demo/fashion/thumb/small3.jpg" alt="avatar" height="50" width="50" />

        <!-- comment body -->
        <div class="comment-body">
            <a href="#" class="comment-author">
                <small class="text-muted pull-right"> 12 Minutes ago </small>
                <span>Melisa Doe</span>
            </a>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                euismod tincidunt laoreet dolore magna aliquam tincidunt erat volutpat laoreet
                dolore magna aliquam tincidunt erat volutpat.
            </p>
        </div><!-- /comment body -->

        <!-- options -->
        <ul class="list-inline fsize11">
            <li>
                <a href="#" class="text-info"><i class="fa fa-reply"></i> Reply</a>
            </li>
            <li>
                <a href="#" class="text-success"><i class="fa fa-thumbs-up"></i> Like</a>
            </li>
            <li>
                <a href="#" class="text-muted">Show All Comments (36)</a>
            </li>
            <li class="pull-right">
                <a href="#" class="text-danger">Delete</a>
            </li>
            <li class="pull-right">
                <a href="#" class="text-primary">Edit</a>
            </li>
        </ul>
    </li><!-- /options -->

    <li class="comment comment-reply">

        <!-- avatar -->
        <img class="avatar" src="assets/images/demo/fashion/thumb/small1.jpg" alt="avatar" height="35" width="35" />

        <!-- comment body -->
        <div class="comment-body">
            <a href="#" class="comment-author">
                <small class="text-muted pull-right"> 4 Minutes ago </small>
                <span>Ioana Doe</span>
            </a>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy! <i class="fa fa-smile-o green"></i>
            </p>
        </div><!-- /comment body -->

        <!-- options -->
        <ul class="list-inline fsize11">
            <li>
                <a href="#" class="text-success"><i class="fa fa-thumbs-up"></i> Like</a>
            </li>
            <li class="pull-right">
                <a href="#" class="text-danger">Delete</a>
            </li>
            <li class="pull-right">
                <a href="#" class="text-primary">Edit</a>
            </li>
        </ul><!-- /options -->

    </li>

    <li class="comment comment-reply">

        <!-- avatar -->
        <img class="avatar" src="assets/images/demo/fashion/thumb/small2.jpg" alt="avatar" height="35" width="35" />

        <!-- comment body -->
        <div class="comment-body">
            <a href="#" class="comment-author">
                <small class="text-muted pull-right"> a moment ago </small>
                <span>Simona Doe</span>
            </a>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy! <i class="fa fa-smile-o green"></i>
            </p>
        </div><!-- /comment body -->

        <!-- options -->
        <ul class="list-inline fsize11">
            <li>
                <a href="#" class="text-success"><i class="fa fa-thumbs-up"></i> Like</a>
            </li>
            <li class="pull-right">
                <a href="#" class="text-danger">Delete</a>
            </li>
            <li class="pull-right">
                <a href="#" class="text-primary">Edit</a>
            </li>
        </ul><!-- /options -->

    </li>
</ul>
<!-- /COMMENT -->

<!-- COMMENT -->
<ul class="comment list-unstyled">
    <li class="comment">

        <!-- avatar -->
        <img class="avatar" src="assets/images/demo/fashion/thumb/small4.jpg" alt="avatar" height="50" width="50" />

        <!-- comment body -->
        <div class="comment-body">
            <a href="#" class="comment-author">
                <small class="text-muted pull-right"> 12 Minutes ago </small>
                <span>Melisa Doe</span>
            </a>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                euismod tincidunt laoreet dolore magna aliquam tincidunt erat volutpat laoreet
                dolore magna aliquam tincidunt erat volutpat.
            </p>
        </div><!-- /comment body -->

        <!-- options -->
        <ul class="list-inline fsize11">
            <li>
                <a href="#" class="text-info"><i class="fa fa-reply"></i> Reply</a>
            </li>
            <li>
                <a href="#" class="text-success"><i class="fa fa-thumbs-up"></i> Like</a>
            </li>
            <li class="pull-right">
                <a href="#" class="text-danger">Delete</a>
            </li>
            <li class="pull-right">
                <a href="#" class="text-primary">Edit</a>
            </li>
        </ul>
    </li><!-- /options -->

    <li class="comment comment-reply">

        <!-- avatar -->
        <img class="avatar" src="assets/images/demo/fashion/thumb/small3.jpg" alt="avatar" height="35" width="35" />

        <!-- comment body -->
        <div class="comment-body">
            <a href="#" class="comment-author">
                <small class="text-muted pull-right"> 4 Minutes ago </small>
                <span>Ioana Doe</span>
            </a>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy! <i class="fa fa-smile-o green"></i>
            </p>
        </div><!-- /comment body -->

        <!-- options -->
        <ul class="list-inline fsize11">
            <li>
                <a href="#" class="text-success"><i class="fa fa-thumbs-up"></i> Like</a>
            </li>
            <li class="pull-right">
                <a href="#" class="text-danger">Delete</a>
            </li>
            <li class="pull-right">
                <a href="#" class="text-primary">Edit</a>
            </li>
        </ul><!-- /options -->

    </li>

    <li class="comment comment-reply">

        <!-- avatar -->
        <img class="avatar" src="assets/images/demo/fashion/thumb/small5.jpg" alt="avatar" height="35" width="35" />

        <!-- comment body -->
        <div class="comment-body">
            <a href="#" class="comment-author">
                <small class="text-muted pull-right"> a moment ago </small>
                <span>Simona Doe</span>
            </a>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy! <i class="fa fa-smile-o green"></i>
            </p>
        </div><!-- /comment body -->

        <!-- options -->
        <ul class="list-inline fsize11">
            <li>
                <a href="#" class="text-success"><i class="fa fa-thumbs-up"></i> Like</a>
            </li>
            <li class="pull-right">
                <a href="#" class="text-danger">Delete</a>
            </li>
            <li class="pull-right">
                <a href="#" class="text-primary">Edit</a>
            </li>
        </ul><!-- /options -->

    </li>
    <li>
        <div class="input-group">
            <input id="btn-input" class="form-control" placeholder="Type your message..." type="text" />
													<span class="input-group-btn">
														<button class="btn btn-primary" id="btn-chat">
                                                            <i class="fa fa-reply"></i> Reply
                                                        </button>
													</span>
        </div>
    </li>
</ul>
<!-- /COMMENT -->

</div>

</div>

</div>
<!-- /TAB 1 CONTENT -->

<!-- TAB 2 CONTENT -->
<div id="tab-2" class="tab-pane active">

<div class="row">

<!-- LEFT -->
<div class="col-lg-3 col-md-4">

    <!-- MENU -->
    <div class="clearfix tab-header">
        <ul class="side-nav list-group margin-bottom30">
            <li class="list-group-item active"><a aria-expanded="true" href="#tab-s1" data-toggle="tab"><i class="fa fa-cog"></i> Personal Info</a></li>
            <li class="list-group-item"><a aria-expanded="true" href="#tab-s2" data-toggle="tab"><i class="fa fa-eye"></i> Change Avatar</a></li>
            <li class="list-group-item"><a aria-expanded="true" href="#tab-s3" data-toggle="tab"><i class="fa fa-lock"></i> Change Password</a></li>
            <li class="list-group-item"><a aria-expanded="true" href="#tab-s4" data-toggle="tab"><i class="fa fa-cogs"></i> Privacy Settings</a></li>
        </ul>
    </div>
    <!-- /MENU -->

</div>

<!-- RIGHT -->
<div class="col-lg-9 col-md-8">
    <div class="tab-content transparent">

        <!-- SETTINGS TAB 1 -->
        <div id="tab-s1" class="tab-pane active">

            <form role="form" action="#" method="post">
                <div class="form-group">
                    <label class="control-label">First Name</label>
                    <input placeholder="John" class="form-control" type="text" />
                </div>
                <div class="form-group">
                    <label class="control-label">Last Name</label>
                    <input placeholder="Doe" class="form-control" type="text" />
                </div>
                <div class="form-group">
                    <label class="control-label">Mobile Number</label>
                    <input placeholder="+1800-1234-657" class="form-control" type="text" />
                </div>
                <div class="form-group">
                    <label class="control-label">Interests</label>
                    <input placeholder="Development, C++, etc." class="form-control" type="text" />
                </div>
                <div class="form-group">
                    <label class="control-label">Occupation</label>
                    <input placeholder="Webdeveloper" class="form-control" type="text" />
                </div>
                <div class="form-group">
                    <label class="control-label">About</label>
                    <textarea class="form-control" rows="3" placeholder="About Me..."></textarea>
                </div>
                <div class="form-group">
                    <label class="control-label">Website Url</label>
                    <input placeholder="http://www.yourwebsite.com" class="form-control" type="text" />
                </div>
                <div class="margiv-top10">
                    <a href="#" class="btn btn-primary">Save Changes </a>
                    <a href="#" class="btn btn-default">Cancel </a>
                </div>
            </form>

        </div>
        <!-- /SETTINGS TAB 1 -->

        <!-- SETTINGS TAB 2 -->
        <div id="tab-s2" class="tab-pane">

            <form class="clearfix" action="#" role="form" method="post" enctype="multipart/form-data">
                <div class="form-group">

                    <div class="row">

                        <div class="col-lg-3 col-md-3 col-sm-12">

                            <div class="default-gradient thumbnail">
                                <img class="img-responsive" src="assets/images/demo/people/9_sm.jpg" alt="" />
                            </div>

                        </div>

                        <div class="col-lg-7 col-md-7 col-sm-12">

                            <div class="sky-form nomargin">
                                <label class="label">Select File</label>
                                <label for="file" class="input input-file">
                                    <div class="button">
                                        <input id="file" onchange="this.parentNode.nextSibling.value = this.value" type="file" />Browse
                                    </div>
                                    <input readonly="" type="text" />
                                </label>
                            </div>

                            <a href="#" class="btn btn-danger btn-xs"><i class="fa fa-times"></i> Remove Avatar</a>

                            <div class="clearfix margin-top20">
                                <span class="label label-warning">NOTE! </span>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt laoreet!
                                </p>
                            </div>

                        </div>

                    </div>

                </div>

                <div class="margiv-top10">
                    <a href="#" class="btn btn-primary">Save Changes </a>
                    <a href="#" class="btn btn-default">Cancel </a>
                </div>

            </form>

        </div>
        <!-- /SETTINGS TAB 2 -->

        <!-- SETTINGS TAB 3 -->
        <div id="tab-s3" class="tab-pane">

            <form action="#" method="post">

                <div class="form-group">
                    <label class="control-label">Current Password</label>
                    <input class="form-control" type="password" />
                </div>
                <div class="form-group">
                    <label class="control-label">New Password</label>
                    <input class="form-control" type="password" />
                </div>
                <div class="form-group">
                    <label class="control-label">Re-type New Password</label>
                    <input class="form-control" type="password" />
                </div>

                <div class="margiv-top10">
                    <a href="#" class="btn btn-primary">Save Changes </a>
                    <a href="#" class="btn btn-default">Cancel </a>
                </div>

            </form>

        </div>
        <!-- /SETTINGS TAB 3 -->

        <!-- SETTINGS TAB 4 -->
        <div id="tab-s4" class="tab-pane">

            <form action="#" method="post">
                <div class="sky-form">

                    <table class="table table-bordered table-striped">
                        <tbody>
                        <tr>
                            <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.</td>
                            <td>
                                <div class="inline-group">
                                    <label class="radio">
                                        <input name="radioOption" checked="" type="radio" /><i></i> Yes
                                    </label>

                                    <label class="radio">
                                        <input name="radioOption" checked="" type="radio" /><i></i> No
                                    </label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.</td>
                            <td>
                                <label class="checkbox nomargin">
                                    <input name="checkbox" checked="" type="checkbox" /><i></i> Yes
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.</td>
                            <td>
                                <label class="checkbox nomargin">
                                    <input name="checkbox" checked="" type="checkbox" /><i></i> Yes
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.</td>
                            <td>
                                <label class="checkbox nomargin">
                                    <input name="checkbox" checked="" type="checkbox" /><i></i> Yes
                                </label>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                </div>

                <div class="margiv-top10">
                    <a href="#" class="btn btn-primary">Save Changes </a>
                    <a href="#" class="btn btn-default">Cancel </a>
                </div>

            </form>

        </div>
        <!-- /SETTINGS TAB 4 -->

    </div>
</div>

</div>

</div>
<!-- /TAB 2 CONTENT -->

</div>
<!-- /tabs content -->

</div>

</div>
